2 files changed, 104 insertions, 0 deletions
diff --git a/frontend/src/routes/archives/[id]/+page.svelte b/frontend/src/routes/archives/[id]/+page.svelte
new file mode 100644
index 0000000..50a2940
--- /dev/null
+++ b/frontend/src/routes/archives/[id]/+page.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { updateArchives } from '$gql/Mutations';
+	import { archiveQuery } from '$gql/Queries';
+	import { Direction, Layout, type FullArchiveFragment, type PageFragment } from '$gql/graphql';
+	import { initReaderContext } from '$lib/Reader';
+	import { initSelectionContext } from '$lib/Selection';
+	import { setTabContext } from '$lib/Tabs';
+	import { toastFinally } from '$lib/Toasts';
+	import Guard from '$lib/components/Guard.svelte';
+	import Head from '$lib/components/Head.svelte';
+	import Titlebar from '$lib/components/Titlebar.svelte';
+	import Grid from '$lib/containers/Grid.svelte';
+	import Gallery from '$lib/gallery/Gallery.svelte';
+	import PageView from '$lib/reader/PageView.svelte';
+	import Reader from '$lib/reader/Reader.svelte';
+	import ArchiveDelete from '$lib/tabs/ArchiveDelete.svelte';
+	import ArchiveDetails from '$lib/tabs/ArchiveDetails.svelte';
+	import ArchiveEdit from '$lib/tabs/ArchiveEdit.svelte';
+	import Tab from '$lib/tabs/Tab.svelte';
+	import Tabs from '$lib/tabs/Tabs.svelte';
+	import { getContextClient } from '@urql/svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	const client = getContextClient();
+	const reader = initReaderContext();
+	setTabContext({
+		tabs: {
+			details: { title: 'Details' },
+			edit: { title: 'Edit' },
+			deletion: { title: 'Delete' }
+		},
+		current: 'details'
+	});
+
+	$: result = archiveQuery(client, { id: data.id });
+
+	function updateCover(event: CustomEvent<number>) {
+		updateArchives(client, { ids: archive.id, input: { cover: { id: event.detail } } }).catch(
+			toastFinally
+		);
+	}
+
+	let archive: FullArchiveFragment;
+
+	$: $result, update();
+	function update() {
+		if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') {
+			archive = structuredClone($result.data.archive);
+
+			$reader.pages = archive.pages;
+		}
+	}
+
+	const selection = initSelectionContext<PageFragment>('Page', (p) => p.path);
+	$selection.selectable = (p) => p.comicId === null;
+
+	$: if (archive) {
+		$selection.view = archive.pages;
+	}
+</script>
+
+<Head section="Archive" title={archive?.name} />
+
+{#if archive}
+	<Grid>
+		<header>
+			<Titlebar title={archive.name} />
+		</header>
+
+		<aside>
+			<Tabs>
+				<Tab id="details">
+					<ArchiveDetails {archive} />
+				</Tab>
+				<Tab id="edit">
+					<ArchiveEdit {archive} />
+				</Tab>
+				<Tab id="deletion">
+					<ArchiveDelete {archive} />
+				</Tab>
+			</Tabs>
+		</aside>
+
+		<main class="overflow-auto">
+			<Gallery
+				pages={archive.pages}
+				on:open={(e) => ($reader = $reader.open(e.detail))}
+				on:cover={updateCover}
+			/>
+		</main>
+	</Grid>
+{:else}
+	<Guard {result} />
+{/if}
+
+<Reader>
+	<PageView layout={Layout.Single} direction={Direction.LeftToRight} />
+</Reader>
diff --git a/frontend/src/routes/archives/[id]/+page.ts b/frontend/src/routes/archives/[id]/+page.ts
new file mode 100644
index 0000000..d872ba2
--- /dev/null
+++ b/frontend/src/routes/archives/[id]/+page.ts
@@ -0,0 +1,5 @@
+export function load({ params }: { params: Record<string, string> }) {
+	return {
+		id: +params.id
+	};
+}